<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>larryms框架之ckplayer扩展组件</title>
    <meta name="keywords" content="swiper" />
    <meta name="description" content="swiper" />
    <meta name="Author" content="larry" />
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="Shortcut Icon" href="${base}/favicon.ico" />
    <!-- load css -->
    <link rel="stylesheet" type="text/css" href="${base}/larryms/layui/css/layui.css" media="all">
    <link rel="stylesheet" type="text/css" href="${base}/larryms/css/admin/base.css" media="all">
    <link rel="stylesheet" type="text/css" href="${base}/larryms/css/animate.css" media="all">
    <link rel="stylesheet" type="text/css" href="${base}/larryms/css/admin/library.css" media="all">
</head>

<body class="larryms-layout-bgB box-blank  library-box">
<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
<!--[if lt IE 9]>
<script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
<script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<div class="layui-fluid margin15">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-lg12 layui-col-md12 layui-col-sm12 layui-col-xs12">
            <section class="layui-card">
                <div class="layui-card-header header-title library-tit">
                    <h1>LarryMS框架扩展之<cite>Ckplayer组件</cite><em>【提供于标准版及以上】</em></h1>
                </div>
                <div class="layui-card-body library-body">
                    <p class="library-tips">
                        <cite>Ckplayer组件：</cite>CKplayer，其全称为超酷flv播放器，它是一款用于网页上播放视频的软件，支持的格式有：http协议上的flv,f4v,mp4格式，同时支持rtmp视频流格式播放，此播放器的特点在于用户可以自己定义播放器的风格，诸如播放/暂停按钮，静音按钮，全屏按钮都是以外部图片接口形式调用，用户根据自己的需要制作出播放器风格所需要使用的各个按钮图片然后替换掉原始风格里相应的图片就可以制作出自己的风格；LarryMS框架封装ckplayer组件，其目的是为了项目开发中更方便快捷的使用，下面是ckplayer组件的示例：
                    </p>
                </div>
            </section>
        </div>
        <div class="layui-col-lg12 layui-col-md12 layui-col-sm12 layui-col-xs12">
            <section class="layui-card">
                <div class="layui-card-body" style="padding: 15px;">
                    <blockquote class="layui-elem-quote larryms-doc-quote" style="font-size: 14px;color: #09B4EF;line-height: 25px;">
                        LarryMS框架之ckplayer组件扩展于Web视频播放应用开发中是非常实用的，借助该组件可轻松实现如：加密视频（指定域名下播放）、试看功能、普通视频播放，清晰度切换、多段视频合并播放、HTML5弹幕、点播、直播等等 <br>
                        larryms官方社区提供所有所提供扩展组件的维护和更新。当前版本：version:X
                    </blockquote>
                </div>
            </section>
        </div>
    </div>
    <div class="layui-row  layui-col-space15 larryms-video">
        <div class="layui-col-lg6 layui-col-md6 layui-col-sm12 layui-col-xs12">
            <section class="layui-card">
                <div class="layui-card-header">
                    Ckplayer视频播放【效果示例】之清晰度切换
                </div>
                <div class="layui-card-body">
                    <div class="video" id="player"></div>
                </div>
            </section>
        </div>
        <div class="layui-col-lg6 layui-col-md6 layui-col-sm12 layui-col-xs12">
            <section class="layui-card">
                <div class="layui-card-header">
                    Ckplayer视频播放【Code示例】
                </div>
                <div class="layui-card-body library-code">
                        <pre class="layui-code">
layui.use('ckplayer', function() {
    var ckplayer = layui.ckplayer,
        videoObject = {
            container: '.video', //“#”代表容器的ID，“.”或“”代表容器的class
            variable: 'player', //该属性必需设置，值等于下面的new chplayer()的对象
            //flashplayer:true,//如果强制使用flashplayer则设置成true
            video: [
                    ['http://img.ksbbs.com/asset/Mon_1703/05cacb4e02f9d9e.mp4', 'video/mp4', '中文标清', 0],
                    ['http://img.ksbbs.com/asset/Mon_1703/d0897b4e9ddd9a5.mp4', 'video/mp4', '中文高清', 0],
                    ['http://img.ksbbs.com/asset/Mon_1703/eb048d7839442d0.mp4', 'video/mp4', '英文高清', 10],
                    ['http://img.ksbbs.com/asset/Mon_1703/d30e02a5626c066.mp4', 'video/mp4', '英文超清', 0],
            ],//视频地址
            logo:'null'
        };
    var player = new ckplayer(videoObject);
});
</pre>
                </div>
            </section>
        </div>
    </div>
</div>
<!-- 加载js文件-->
<script type="text/javascript" src="${base}/larryms/layui/layui.js"></script>
<script type="text/javascript">
    layui.config({
        version: "2.0.8",
        base: '${base}/larryms/',
        page: 'thirddemo',
        identified: 'ckplayer'
    }).extend({
        larry: 'js/base'
    }).use('larry');
</script>
</body>

</html>